.container {
  width: 860px;
  .background {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    margin: -20px 0 0 -20px;
    opacity: 0.78;
    filter: blur(200px);
  }
  .music {
    display: flex;
    justify-content: center;

    .bg {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 250px;
      height: 250px;
      cursor: pointer;

      .black {
        width: 250px;
        height: 250px;
        background: black;
        border-radius: 50%;
      }

      .red {
        position: absolute;
        width: 180px;
        height: 180px;
        background: red;
        border-radius: 50%;
      }

      @keyframes rotate {
        0% {
          transform: rotate(0deg);
        }

        100% {
          transform: rotate(-360deg);
        }
      }

      .img {
        position: absolute;
        width: 170px;
        height: 170px;
        border-radius: 50%;
        transform: rotate(0deg);
      }

      .rotate {
        animation: rotate 60s infinite linear;
      }

      .stop {
        animation-play-state: paused;
      }
    }

    .content {
      width: 400px;
      padding: 0 0 0 20px;

      .info {
        display: flex;
        flex-direction: column;

        // color: red;
        span:first-child {
          padding: 10px 0 20px;
          font-size: 30px;
          font-weight: 400;
        }

        span:last-child {
          font-size: 15px;
          font-weight: 400;
        }
      }

      .lyric {
        padding: 30px 0 0;
        font-size: 15px;
        font-weight: 400;
      }

      .process {
        padding: 30px 0 0;

        .time {
          display: flex;
          justify-content: space-between;
          margin: 0 0 -5px;
          font-size: 10px;
        }

        .volume {
          display: flex;
          justify-content: flex-end;
        }
      }
    }

    .list {
      color: red;
    }
  }
}